<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>西瓜后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/purchasing_management.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/files.css" media="all">
</head>
<!--弹框订单确认1 start-->
<div class="alert alert_confirm layui-anim layui-anim-scaleSpring" style="display: none">
    <div class="layui-card">
        <div class="layui-card-header">订单确认</div>
        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <input type="text" class="layui-input" placeholder="请输入物流费用">
                </div>
                <div class="layui-form-item checks layui-clear">
                    <div class="layui-inline fl">
                        <input type="checkbox" lay-skin="primary"  title="包邮" name="postage"/>
                    </div>
                    <div class="layui-inline fr">
                        <a class="layui-text-blue" id="editAddress">修改配送地址</a>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-layer-btn">
            <a class="layui-layer-btn0">确认</a>
            <a class="layui-layer-btn1">取消</a>
        </div>
    </div>
</div>
<!--弹框订单确认1 end-->
<!--弹框订单确认-修改配送地址 start-->
<div class="alert alert_address layui-anim layui-anim-scaleSpring" style="display: none">
    <div class="layui-card">
        <div class="layui-card-header">订单确认</div>
        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <input type="text" class="layui-input" placeholder="请输入发货地址">
                </div>
                <div class="layui-form-item">
                    <input type="text" class="layui-input" placeholder="请输入物流费用">
                </div>
                <div class="layui-form-item checks layui-clear">
                    <div class="layui-inline fl">
                        <input type="checkbox" lay-skin="primary"  title="包邮" name="postage"/>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-layer-btn">
            <a class="layui-layer-btn0">确认</a>
            <a class="layui-layer-btn1">取消</a>
        </div>
    </div>
</div>
<!--弹框订单确认-修改配送地址 end-->
<body>
<div class="layui-fluid step1">
    <div class="layui-card">
        <div class="layui-card-body stepNav">
            <ul>
                <li class="on"><p class="step_nub">1</p><p class="step_text">待平台确认</p></li>
                <li class="step_line"></li>
                <li><p class="step_nub">2</p><p class="step_text">待财务收款</p></li>
                <li class="step_line"></li>
                <li><p class="step_nub">3</p><p class="step_text">录入车架号</p></li>
                <li class="step_line"></li>
                <li><p class="step_nub">4</p><p class="step_text">待生成采购单</p></li>
                <li class="step_line"></li>
                <li><p class="step_nub">5</p><p class="step_text">已生成采购单</p></li>
            </ul>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="step_block step_block_file layui-clear">
                <h4>上传合同</h4>
                <div class="tips">请下载合同模板，根据模板样式进行签署，签署后请上传扫描件，即提交平台确认。</div>
                <div class="files layui-clear">
                    <a class="layui-btn layui-btn-border" id="file">上传附件</a>
                    <div id="uploadImg_all" class="uploadImg_result"></div>
                </div>
                <div class="my_skin">
                    <a class="layui-layer-btn0">上传合同</a>
                    <a class="layui-layer-btn1">下载合同</a>
                    <a class="layui-layer-btn3">取消订单</a>
                </div>
            </div>
            <div class="step_block step_block1">
                <h4>采购合同</h4>
                <table>
                    <tbody>
                    <tr>
                        <th>采购合同</th>
                        <td><a href="javascript;" class="check_btn layui-text-blue">查看</a>&nbsp;<a href="javascript:;" class="downBtn layui-text-blue">下载</a> </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="step_block step_block2">
                <h4>车辆信息</h4>
                <table>
                    <tbody>
                    <tr>
                        <th>下订时间</th>
                        <td>2018-10-23  13:24:32</td>
                    </tr>
                    <tr>
                        <th>下订数量</th>
                        <td>5</td>
                    </tr>
                    </tbody>
                </table>
                <table>
                    <tbody>
                    <tr>
                        <th>品牌</th>
                        <th>车系</th>
                        <th>车型</th>
                        <th>指导价</th>
                        <th>采购价</th>
                        <th>批售价</th>
                        <th>外观/内饰颜色</th>
                    </tr>
                    <tr>
                        <td>大众</td>
                        <td>朗逸</td>
                        <td>2018款自动精英型</td>
                        <td>124900</td>
                        <td>107800</td>
                        <td>107800</td>
                        <td>黑/棕</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="step_block step_block3">
                <h4>采购方信息</h4>
                <table>
                    <tbody>
                    <tr>
                        <th>经销商</th>
                        <td>北京朝阳嘉伟经销商</td>
                    </tr>
                    <tr>
                        <th>门店</th>
                        <td>北京朝阳嘉伟店</td>
                    </tr>
                    <tr>
                        <th>发货地址</th>
                        <td>北京市 朝阳区 北京西路248号</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="step_block step_block4">
                <h4>金融方案</h4>
                <table>
                    <tbody>
                    <tr>
                        <th>支付方式</th>
                        <td>融资</td>
                    </tr>
                    <tr>
                        <th>融资产品</th>
                        <td>优全融</td>
                    </tr>
                    <tr>
                        <th>融资比例</th>
                        <td>60%</td>
                    </tr>
                    <tr>
                        <th>期限</th>
                        <td>30天</td>
                    </tr>
                    <tr>
                        <th>服务日费率</th>
                        <td>0.05%</td>
                    </tr>
                    <tr>
                        <th>服务费(元)</th>
                        <td>2333</td>
                    </tr>
                    <tr>
                        <th>日利率</th>
                        <td>0.1%</td>
                    </tr>
                    <tr>
                        <th>首付金额(元)</th>
                        <td>883000</td>
                    </tr>
                    </tbody>
                </table>
                <table>
                    <tbody>
                    <tr>
                        <th>支付方式</th>
                        <td>全款</td>
                    </tr>
                    <tr>
                        <th>合计支付(元)</th>
                        <td>1078000</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="step_block step_block5">
                <h4>接车人信息</h4>
                <table>
                    <tbody>
                    <tr>
                        <th>姓名</th>
                        <td>龚天否</td>
                    </tr>
                    <tr>
                        <th>电话</th>
                        <td>13892829322</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="step_block step_block6">
                <h4>配送方式</h4>
                <table>
                    <tbody>
                    <tr>
                        <th>配送方式</th>
                        <td>送车上门</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="my_skin">
            <a class="layui-layer-btn1" id="confirm_btn">确认订单</a>
            <a class="layui-layer-btn1" id="back_btn">退回订单</a>
        </div>
    </div>
</div>
<script src="../../../layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        purchasing: 'purchasing_management/purchasing', //list模块
    }).use(['index','purchasing','jquery','upload'],function () {
        var $ = layui.$
            ,upload = layui.upload;
        var uploadImg_all= $("#uploadImg_all"),
            file_all = upload.render({
            elem: '#file'
            ,url: '/upload/'
            ,multiple: false
            ,auto: false //选择文件后不自动上传
            ,bindAction: '#fileListAction' //指向一个按钮触发上传
            ,choose: function(obj) {
                //将每次选择的文件追加到文件队列
                var files = this.files = obj.pushFile();

                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function (index, file, result) {
                    var divImg=$([
                        '<div class="uploadImg_result_content">'
                        ,'<img src="'+result+'">'
                        ,'<a href="javascript:;" class="closes delete">'
                        ,'</a>'
                        ,'</div>'
                    ].join(''));
                    //删除
                    divImg.find('.delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        divImg.remove();
                        file_all.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });
                    divImg.on("mouseover mouseout",function () {
                        $(this).find(".mainImg").toggleClass("layui-hide");
                    })
                    uploadImg_all.html(divImg);
                    //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
                })
            }
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                console.log(obj.total); //得到总文件数
                console.log(obj.successful); //请求成功的文件数
                console.log(obj.aborted); //请求失败的文件数
                return delete this.files[index];
            }
        });
        $("#confirm_btn").click(function () {
            $(".alert_confirm").show();
            overBlack()
        });
//        弹框确认
        $(".alert .layui-layer-btn0").click(function () {
            clearBlack()
        })
        //  弹框取消
        $(".alert .layui-layer-btn1").click(function () {
            clearBlack()
        })
        $("#back_btn").click(function () {
            layer.confirm('确认要将该笔采购订单退回至门店吗？', function(index){
                layer.prompt({
                    formType: 2,
                    title: '请输入退回原因（注：必填项）',
                    area: ['400px', '150px'],
                    btnAlign: 'c',
                    yes: function(index, layero){
                        // 获取文本框输入的值
                        var value = layero.find(".layui-layer-input").val();
                        if (value) {
                            alert("输入值为：" + value);
                            layer.close(index);
                        } else {
                            layer.msg("输入值不能为空！");
                        }
                    }
                });
                layer.close(index);
            });
        })
        $("#editAddress").click(function () {
            $(".alert_confirm").hide();
            $(".alert_address").show();
        })
        function overBlack(){
            var tempHeight = ($("body").height() > $(window).height()) ? $("body").height() : $(window).height();
            if($(document).height() > tempHeight){
                tempHeight = $(document).height();
            }
            $("body").append("<div id='blackBox'></div>");
            $("#blackBox").css({"position":"absolute","width":"100%","height":tempHeight,"top":0,"left":0,"background":"#000","opacity":0.7,"filter":"alpha(opacity=70)"});
            $("#blackBox").show();
        }
        function clearBlack(){
            $("#blackBox,.alert").hide();
        }
    });
</script>
</body>
</html>